<template>
	<view class="container">
		<view style="width: 90%;margin: 5%;display: flex;justify-content: space-between;">
			<title style="font-weight: bold;color: #242f66;">店员列表</title>
		</view>
		<scroll-view scroll-y="true" class="scrollbox" @scrolltolower="lower" enable-back-to-top="true"
			@scrolltoupper="upper" lower-threshold="112">
			<view class="merchantList">
				<view class="ArrList">
					<view class="List" v-for="(item,index) in fenecList" :key="index">
						<view class="merchan-data">
							<view class="imgData">
								<view style="font-size: 60rpx;color: #ffff;">
									{{item.tellerName.charAt(0)}}
								</view>
							</view>
							<view class="text">
								<title style="margin-top: 20rpx;font-size: 30rpx;color: #242f66;">
									<title style="font-size: 25rpx;color: #242f66;">
										姓名：</title>
									{{item.tellerName || ""}}
								</title>
								<title style="margin-top: 2rpx;font-size: 30rpx;color: #242f66;">
									<title style="font-size: 25rpx;color: #242f66;">
										编号：</title>
									{{item.tellerNo || ""}}
								</title>
								<title style="margin-top: 2rpx;font-size: 30rpx;color: #242f66;">
									<title style="font-size: 25rpx;color: #242f66;">
										POS号：</title>
									{{item.posNo || ""}}
								</title>
							</view>

							<view class="" style="margin: 30rpx">
								<view class="button-wrap1">
									<uv-button type="primary" size="mini  " text="修改" @click="repair(item)"></uv-button>
								</view>
								<view class="button-wrap2">
									<uv-button type="primary" size="mini  " text="删除" @click="unbind(item)"></uv-button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="button-wrap">
			<!-- 新增终端绑定 -->
			<button class="button-login" @click="navigateToAccountLogin">
				<text class="wx-login loginText1">新增店员</text>
			</button>
		</view>
	</view>
</template>

<script>
	import {
		posTeller
	} from "@/network/mine.js"
	import {
		baseURL
	} from '@/network/base.js'; //导入接口的前缀地址
	export default {
		computed: {
			dropItem(name) {
				return (name) => {
					const result = {};
					const find = this.result.find(item => item.name === name);
					if (find) {
						result.label = find.label;
						result.value = find.value;
					} else {
						result.label = this[name].label;
						result.value = this[name].value;
					}
					return result;
				}
			}
		},
		data() {
			return {
				query: {
					orgCode: "01001"
				},
				params: {
					page: 1,
					pageSize: 10,
				},
				list: {
					value: "商户注销",
					value1: "终端故障",
					value2: "更换终端",
					value3: "其它"
				},
				radiovalue: "",
				fenecList: [
					// {
					// 	tellerName: "打豆豆",
					// 	tellerNo: "110",
					// 	posNo: "110011"
					// },
					// {
					// 	tellerName: "睡觉",
					// 	tellerNo: "120",
					// 	posNo: "120021"
					// }
				],
				total: 0,
			}
		},
		onLoad(e) {
			const arr = uni.getStorageSync('listData')
			this.query.shopNo = arr.merNo
			this.merchantList()
		},
		methods: {
			onShow1() {
				const arr = uni.getStorageSync('listData')
				console.log(arr)
				this.query.shopNo = arr.merNo
				this.onPullDownRefresh1();
			},
			onPullDownRefresh1() {
				this.params.page = 1;
				this.merchantList()
			},
			onReachBottom1() {
				if (this.params.page * this.params.pageSize < this.total) {
					this.params.page = this.params.page + 1
					this.merchantList()
				}
			},
			merchantList() {
				posTeller(this.params, this.query).then(res => {
					console.log(res)
					const code = res.data.code;
					if (code == "000000") {
						if (this.params.page === 1) {
							this.fenecList = res.data.data.rows
						} else {
							this.fenecList = this.fenecList.concat(res.data.data.rows)
						}
						this.total = res.data.data.total
					} else {
						uni.showToast({
							title: res.data.message
						})
					}
				}).catch(err => {
					// console.log(err)
				})
			},
			changeSearch() {
				this.merchantList()
			},
			upper() {
				this.params.page = 1;
				this.merchantList()
			},
			lower() {
				if (this.params.page * this.params.pageSize < this.total) {
					this.params.page = this.params.page + 1
					this.merchantList()
				}
			},
			checkbox(e) {
				console.log(e)
			},
			navigate() {

			},
			repair(item) {
				console.log(item)
				wx.navigateTo({
					url: '/pages_subPack/mine/terminal/clerk/addNewClerk?title=' + 2 + "&model=" + encodeURIComponent(JSON
						.stringify(item))
				})
			},
			unbind(item) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '你确定要删除吗',
					success: function(res) {
						if (res.confirm) {
							console.log('确定');
							let url = baseURL + '/posTeller/' + item.id;
							uni.request({
								url: url,
								method: 'DELETE',
								data: {
									id: item.id
								},
								header: {
									'Authorization': uni.getStorageSync('token') //自定义请求头信息
								},
								success: (res) => {
									console.log(res);
									if (res.data.code == "000000") {
										uni.showToast({
											title: '删除成功',
											icon: 'success',
											duration: 2000
										})
										that.merchantList()
									} else {
										uni.showToast({
											title: res.data.message
										})
									}
								}
							});
						} else if (res.cancel) {
							console.log('取消');
						}
					}
				});
			},
			navigateToAccountLogin() {
				wx.navigateTo({
					url: '/pages_subPack/mine/terminal/clerk/addNewClerk?title=' + 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		// height: 100vh;
		display: flex;
		align-items: center;
		/* justify-content: center; */
		flex-direction: column;
	}

	.content {
		width: 90%;
	}

	.search {
		margin-top: 20rpx;
		height: 110rpx;
	}

	.merchantList {
		background: #f4f4f4;
		width: 100%;
	}

	.merchan {
		margin: 5% 0% 0% 5%;
		font-weight: bold;
		color: #242f66;
	}

	.ArrList {
		display: flex;
		align-items: center;
		/* justify-content: center; */
		flex-direction: column;
	}

	.List {
		background: #fff;
		height: 165rpx;
		width: 90%;
		border-radius: 20rpx;
		margin-top: 2%;
	}

	.merchan-data {
		display: flex;
	}

	.imgData {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 200rpx;
		border-radius: 20rpx;
		margin: 30rpx;
		background: #179bd7;
	}

	.image {
		max-width: 100rpx;
		max-height: 100rpx;
	}

	.text {
		width: 100%;
		display: flex;
		flex-flow: column;
	}

	.merchan-data-1 {
		display: flex;
		justify-content: center;
	}

	.merchan-data-2 {
		margin-top: 8%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.scrollbox {
		height: calc(80vh);
	}

	.button-wrap {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.button-login {
		width: 80%;
		height: 110rpx;
		border-radius: 20rpx;
		background: #222d65;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.button-wrap2 {
		margin-top: 20rpx;
	}

	.imgData-1 {
		width: 100rpx;
		height: 100rpx;
		border-radius: 20rpx;
		// background-image: url('../../static/index.png');
		background-size: 100% 100%;
		margin: 8rpx 3rpx 3rpx 8rpx;
	}

	.text-1 {
		display: flex;
		justify-content: space-between;
	}

	.text-3 {
		width: 60%;
		margin-top: 40rpx;
	}

	.text-4 {
		width: 11%;
		margin-top: 40rpx;
	}

	.text-5 {
		background: #efefef;
		height: 127rpx;
		border-radius: 15px;
		margin-top: 20rpx;
	}

	/deep/.uv-popup {
		.uv-input {
			height: 115rpx !important;
		}
	}
</style>